<!--
 * @Descripttion: 账务汇总详情
 * @Author: xiao li
 * @Date: 2021-03-11 15:42:01
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-09 11:29:28
-->

<template>
  <div class="lb-finance-detail">
    <top-nav :isBack="true" />
    <div class="page-main">
      <el-row class="mb-lg">
        <lb-button
          size="mini"
          plain
          type="primary"
          icon="el-icon-download"
          :loading="downloadLoading"
          @click="exportOrder"
        >导出</lb-button>
      </el-row>
      <el-row>
        <div class="flex-warp mb-lg">
          <div class="flex-1 mr-lg pr-lg">店铺名称：{{store_name}}</div>
          <div>账单周期：{{searchForm.start_time | handleTime}} 至 {{searchForm.end_time | handleTime}}</div>
        </div>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="收支时间"
        ></el-table-column>
        <el-table-column
          prop="order_price"
          label="订单收入（元）"
        ></el-table-column>
        <el-table-column
          prop="refund_price"
          label="订单退款（元）"
        ></el-table-column>
        <el-table-column
          prop="wallet_price"
          label="提现（元）"
        ></el-table-column>
        <!-- <el-table-column
          prop="true_price"
          label="余额（元）"
        ></el-table-column> -->
      </el-table>
      <div class="space-lg mt-lg mb-lg"></div>
      <lb-button
        type="primary"
        @click="$router.back(-1)"
      >{{$t('action.back')}}</lb-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import pubic from '@/utils/public'
export default {
  data () {
    return {
      loading: false,
      navTitle: '',
      downloadLoading: false,
      searchForm: {
        page: 1,
        limit: 10,
        cap_id: 0,
        start_time: '',
        end_time: ''
      },
      store_name: '',
      tableData: [],
      total: 0,
      subForm: {
        status: 0,
        text: ''
      },
      subFormRules: {
        status: { required: true, message: '请选择', trigger: 'blur' },
        text: { required: true, type: 'string', message: '请输入审核意见', trigger: 'blur' }
      }
    }
  },
  created () {
    let { id, range } = this.$route.query
    this.searchForm.cap_id = id
    if (range && range.length > 0) {
      this.searchForm.start_time = parseInt(range.split(',')[0] / 1000)
      this.searchForm.end_time = parseInt(range.split(',')[1] / 1000)
    }
    this.getTableDataList()
  },
  methods: {
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    },
    async getTableDataList (flag) {
      if (flag) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      let { code, data } = await this.$api.finance.dateCount(searchForm)
      this.loading = false
      if (code !== 200) return
      this.tableData = data.data
      this.total = data.total
      this.store_name = data.store_name
      this.searchForm.start_time = data.start_time
      this.searchForm.end_time = data.end_time * 1 + 24 * 3600 - 1
    },
    /**
     * @method 导出订单
     */
    exportOrder () {
      this.downloadLoading = true
      let searchForm = JSON.parse(JSON.stringify(this.searchForm))
      let url = pubic.getProCurrentHref()
      let keywords = url.indexOf('?') > 0 ? '' : '?'
      let flag = url.indexOf('?') > 0
      Object.getOwnPropertyNames(searchForm).forEach((keys, value) => {
        keywords += flag
          ? `&${keys}=${searchForm[keys]}`
          : `${keys}=${searchForm[keys]}`
        flag = true
      })
      let token = sessionStorage.getItem('minitk')
      let dwonlaodUrl = `${url}/shop/admin/AdminExcel/dateCount${keywords}&token=${token}`
      window.location.href = dwonlaodUrl
      setTimeout(() => {
        this.downloadLoading = false
      }, 5000)
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-finance-detail {
  .el-image {
    width: 120px;
    height: 120px;
  }
  .el-textarea {
    width: 600px;
  }
}
</style>
